<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐变</title>
    <style>
        div {
            display: inline-block;
            margin: 20px;
        }
    </style>
</head>
<body>
<style>
    .gradient-border {
        width: 150px;
        height: 80px;
        border: 5px solid transparent;
        border-image: linear-gradient(to bottom, #0099cc, #f27280);
        border-image-slice: 1;
    }
</style>
<div class="gradient-border">
    border 边的渐变
</div>
<!---->
<style>
    .gradient-border-circle {
        --borderWidth: 5px; /* 定义变量 */

        width: 150px;
        height: 80px;
        border-radius: var(--borderWidth);
        background: #fff;
        position: relative;
    }

    .gradient-border-circle::after {
        --borderWidth: 5px; /* 定义变量 */

        content: '';
        position: absolute;
        top: calc(-1 * var(--borderWidth));
        left: calc(-1 * var(--borderWidth));
        height: calc(100% + var(--borderWidth) * 2);
        width: calc(100% + var(--borderWidth) * 2);
        background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
        border-radius: calc(2 * var(--borderWidth));
        z-index: -1;
    }
</style>
<div class="gradient-border-circle">
    <div class="content">圆形形渐变边框</div>
</div>

<style>
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 290px;
        height: 90px;
        position: relative;
        border-radius: 50px;
        font-weight: 500;
        border: solid 5px transparent;
        color: #5e3700;
        font-size: 32px;
        margin: 20px;
    }

    .btn-primary {
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.61);
        box-shadow: inset 0 5px 15px 0 rgba(255, 255, 255, 0.4),
        inset 0 10px 15px 0 rgba(255, 255, 255, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.35);
        background-image: radial-gradient(
                circle at 50% 0%,
                #fff000 50%,
                #ffcd00 100%
        ),
        linear-gradient(101deg, #ffc46d, #fa0055);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-outline {
        color: #fff;
        border: 5px solid #ffffff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    .btn-default {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #ff7c2d 3%, #ff016e 97%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-secondary {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #ff005d 5%, #0066ff 98%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-disabled {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #D0D0D0 5%, #BBBBBB 98%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-success {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #ffc600 6%, #04e199 94%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);

        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-info {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #32A8FF 6%, #00CCB4 94%),
        linear-gradient(to bottom, #D696BC, #CD4F5D);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    .btn-circle {
        min-width: 90px;
        max-width: 90px;
        height: 90px;
        font-size: 24px;
        color: #fff;
        border-radius: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        flex-direction: column;
        align-items: center;
        justify-content: center;

        background-image: linear-gradient(-151deg, #17FEF6 0%, #8417F9 100%), linear-gradient(to bottom, #fff3b6, #e27d2c);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }

    span {
        display: block;
        text-align: center;
    }

    .btn-group {
        color: #fff;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        background-image: linear-gradient(to right, #17EDFE 6%, #8417F9 94%),
        linear-gradient(to bottom, #fff3b6, #e27d2c);
        background-origin: border-box;
        background-clip: padding-box, border-box;
    }
</style>
<br>
<div class="btn btn-primary"></div>
<div class="btn btn-outline"></div>
<div class="btn btn-secondary"></div>

<div class="btn btn-disabled"></div>
<div class="btn btn-default"></div>
<div class="btn btn-circle"></div>
<div class="btn btn-success"></div>
<div class="btn btn-info"></div>
<div class="btn btn-group"></div>



</body>
</html>
